import { Table, Button } from "antd";
import { IDept } from "../../types/api";
import { useState, useEffect } from "react";
import { formatDateToChinese } from "../../utils";
import api from "../../api";

const Dept = () => {
  const [data, setData] = useState<IDept[]>([]);
  useEffect(() => {
    getData();
  }, []);
  const getData = async () => {
    const data = await api.getDeptList();
    console.log(data, "....");
    setData(data);
  };
  const columns = [
    {
      title: "部门名称",
      dataIndex: "deptName",
      key: "deptName",
    },
    {
      title: "负责人",
      dataIndex: "userName",
      key: "userName",
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
      render: (text: string) => {
        return formatDateToChinese(text);
      },
    },
    {
      title: "更新时间",
      dataIndex: "updateTime",
      key: "updateTime",
      render: (text: string) => {
        return formatDateToChinese(text);
      },
    },
    {
      title: "操作",
      key: "action",
      render: (_: string, record: IDept) => (
        <div>
          <Button
            type="primary"
            className="mr10"
            onClick={() => handleAdd(record._id)}
          >
            新增
          </Button>
          <Button
            type="primary"
            className="mr10"
            onClick={() => handleEdit(record)}
          >
            编辑
          </Button>
          <Button type="primary" danger onClick={() => handleDel(record._id)}>
            删除
          </Button>
        </div>
      ),
    },
  ];
  const handleAdd = (id: string) => {
    console.log("新增", id);
  };
  const handleEdit = (val: IDept) => {
    console.log("编辑", val);
  };
  const handleDel = (id: string) => {
    console.log("删除", id);
  };
  return (
    <div className="wrap-table">
      <div className="header">部门列表</div>
      <Table<IDept> rowKey="_id" columns={columns} dataSource={data} />
    </div>
  );
};
export default Dept;
